<template class="page">
  <base-view :model="query" @submit="search">
    <template v-slot:params>

      <a-col :span="8" v-show="query.instId != ''">
        <a-form-item label="收单机构">
          <a-select mode="default" :allowClear="true" style="width: 100%" show-search placeholder="请选择收单机构"
            option-filter-prop="children" @focus="selectOrganization" @search="selectOrganization"
            @select="setOrganizationValue" v-model="query.acqInstCode">
            <a-select-option v-for="(d, index) in acqInstCodeList" :key="index">
              {{ d.id }}-{{ d.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>

      <a-col :span="8" v-show="query.instId != ''">
        <a-form-item label="终端名称">
          <a-select mode="default" :allowClear="true" style="width: 100%" show-search placeholder="请选择终端名称"
            option-filter-prop="children" @focus="selectTermNoList" @search="selectTermNoList"
            @select="setTermNoListValue" v-model="query.termNo">
            <a-select-option v-for="(d, index) in termNoList" :key="index">
              {{ d.id }}-{{ d.termPrintMerName }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>

      <a-col :span="8" v-show="query.instId != ''">
        <a-form-item label="商户名称">
          <a-select mode="default" :allowClear="true" style="width: 100%" show-search placeholder="请选择商户名称"
            option-filter-prop="children" @focus="selectMchntName" @search="selectMchntName" @select="setMchntNameValue"
            v-model="query.mchntName">
            <a-select-option v-for="(d, index) in mchntNameList" :key="index">
              {{ d.id }}-{{ d.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>

      <a-col :span="8" v-show="query.instId != ''">
        <a-form-item label="交易类型">
          <a-select mode="default" :allowClear="true" style="width: 100%" show-search placeholder="请选择交易类型"
            option-filter-prop="children" @focus="selectTxnName" @search="selectTxnName" @select="setTxnNameValue"
            v-model="query.txnName">
            <a-select-option v-for="(d, index) in txnNameList" :key="index">
              {{ d.id }}-{{ d.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>

      <a-col :span="8">
        <a-form-model-item label="最小交易金额">
          <a-input placeholder="输入最小交易金额" v-model="query.orderAmtStart" />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="最大交易金额">
          <a-input placeholder="输入最大交易金额" v-model="query.orderAmtEnd" />
        </a-form-model-item>
      </a-col>

      <a-col :span="8">
        <a-form-item @change="handleDateChange" label="交易日期">
          <range-date style="width: 100%"></range-date>
        </a-form-item>
      </a-col>

      <a-col :span="8">
        <a-form-item @change="handleDateChange" label="入账日期">
          <range-date style="width: 100%"></range-date>
        </a-form-item>
      </a-col>

      <a-col :span="24" v-show="query.instId != ''">
        <a-button type="primary" html-type="submit">查询</a-button>
        <a-button style="margin-left: 8px" html-type="reset" @click="reset">重置</a-button>
      </a-col>
    </template>
    <div class="section">
      <a-table ref="table" :columns="columns" :dataSource="dataSource" :rowKey="
        (record, index) => {
          return index;
        }
      " :loading="loading" :pagination="pagination" :scroll="{ x: 2000 }">
        <template slot="operation" slot-scope="text, record">
          <a class="text-btn" v-has-permission="['tblMchntAcctDet:update']" @click="edit(record)">修改</a>
          <a-popconfirm title="确定要启用吗？" @confirm="cancel(record)" v-hasPermission="['tblMchntAcctDet:update']"
            v-if="record.dstChannelStatus !== 'Y'">
            <a class="text-btn danger">启用</a>
          </a-popconfirm>
          <a-popconfirm title="确定要停用吗？" @confirm="cancel(record)" v-hasPermission="['tblMchntAcctDet:update']"
            v-if="record.dstChannelStatus !== 'N'">
            <a class="text-btn danger">停用</a>
          </a-popconfirm>
          <a-popconfirm title="确定要注销吗？" @confirm="forbid(record)" v-hasPermission="['tblMchntAcctDet:delete']"
            v-if="record.dstChannelStatus !== 'N'">
            <a class="text-btn danger">注销</a>
          </a-popconfirm>
          <a class="text-btn" v-has-permission="['tblMchntAcctDet:view']" @click="view(record)">详情</a>
          <a class="text-btn" v-has-permission="['tblMchntAcctDet:inport']" @click="exportExcel(record)">导入</a>
          <a-badge status="warning" text="无权限"
            v-has-no-permission="['tblMchntAcctDet:view', 'tblMchntAcctDet:update', 'tblMchntAcctDet:delete']">
          </a-badge>
        </template>
      </a-table>
    </div>
  </base-view>
</template>
<script>
import RangeDate from '@/components/datetime/RangeDate'
import moment from "moment";
moment.locale('zh-cn');

export default {
  name: "TblMchntAcctDet",
  components: { RangeDate },
  data: function () {
    return {
      query: {
        instId: "",
        acqInstCode: "",
        termNo: "",
        mchntNo: "",
        mchntName: "",
        termName: "",
        txnName: "",
        txnStatus: "",
        syy: "",
        frontSeqNum: "",
        payerAcctInfo: "",
        netSettleDate: "",
        orderAmtStart: "",
        orderAmtEnd: "",
        mchntOrderId: "",
        transDate: "",
        csmcBizType: "",
        transAmt: "",
        primaryKey: "",
        payAcctNo: "",
        mchntTotalFee: "",
        startDate: "",
        endDate: "",
      },
      acqInstCodeList: [],
      // termNoList:[],
      mchntNameList: [],
      mchntNoList: [],
      txnNameList: [],
      termNoList: [],//终端集合
      txnStatusList: [],
      syyList: [],
      beanInfo: {},
      modalVisible: false,
      modalTitle: "",
      operationType: "add",
      loading: false,
      open: false,
      pagination: {
        pageSizeOptions: ["10", "20", "30", "40", "100"],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) =>
          `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`,
      },
      columns: [
        {
          title: "银行代码",
          dataIndex: "instId",
          width: 150,
          fixed: 'left'
        },
        {
          title: "收单机构",
          dataIndex: "acqInstCode",
          width: 150,
        },
        {
          title: "终端号",
          dataIndex: "termNo",
          width: 150,
        },
        {
          title: "终端名称",
          dataIndex: "termName",
          width: 150,
        },
        {
          title: "商户号",
          dataIndex: "mchntNo",
          width: 200,
        },
        {
          title: "商户名称",
          dataIndex: "mchntName",
          width: 200,
        },
        {
          title: "入账日期",
          dataIndex: "netSettleDate",
          width: 150,
        },
        {
          title: "交易日期",
          dataIndex: "transDate",
          width: 150,
        },
        {
          title: "交易类型",
          dataIndex: "csmcBizType",
          width: 150,
          customRender: (text) => {
            return text ? {
              "00": '一般业务',
              "01": '卡券购买/退款',
              "02": '担保支付',
              "03": '合并支付',
            }[text] : ""
          }
        },
        {
          title: "交易金额",
          dataIndex: "transAmt",
          width: 150,
        },
        {
          title: "请求方流水号",
          dataIndex: "primaryKey",
          width: 150,
        },
        {
          title: "付款人账号",
          dataIndex: "payAcctNo",
          width: 150,
        },
        {
          title: "商户订单号",
          dataIndex: "mchntOrderId",
          width: 150,
        },
        {
          title: "商户手续费",
          dataIndex: "mchntTotalFee",
          width: 150,
        },
        {
          title: "操作",
          fixed: "right",
          scopedSlots: { customRender: "operation" },
        },
      ],
      dataSource: [],
    };
  },
  methods: {
      handleDateChange(value) {
      if (value) {
        this.query.startDate = value[0]
        this.query.endDate = value[1]
      }
    },
    mchntChange(value) {
      this.query.merchantNo = value;
    },
    handlerChange(value, item) {
      if (item.indexOf('Time') > -1) {
        value = moment(value).format('HH:mm:ss');
      }
      this.query[item] = value

    },
    handlerSearch(item) { },
    industryTypeChange(value) {
      this.query.industryType = value;
    },
    industryTypeSearch(item) { },

    async search(e) {
      e && e.preventDefault && e.preventDefault();
      try {
        //http://localhost:20117/UPMP/DEV
        const res = await this.$get("/admin/csmc/tblMchntAcctDet/list", {
          instId: this.query.instId,//银行代码
          acqInstCode: this.query.acqInstCode,// 收单机构
          termNo: this.query.termNo,//终端号
          termName: this.query.termName,//终端名称
          mchntNo: this.query.mchntNo,//商户号
          mchntName: this.query.mchntName,//商户名称
          netSettleDate: this.query.netSettleDate,//入账日期
          transDate: this.query.transDate,//交易日期
          csmcBizType: this.query.csmcBizType,//交易类型
          transAmt: this.query.transAmt,//交易金额
          primaryKey: this.query.primaryKey, //请求方流水号
          payAcctNo: this.query.payAcctNo,//付款人账号
          mchntOrderId: this.query.mchntOrderId,//商户订单号
          mchntTotalFee: this.query.mchntTotalFee,//商户手续费
          merchantNo: this.query.merchantNo,

          pageNum: this.pagination.defaultCurrent,
          pageSize: this.pagination.defaultPageSize,
        });
        this.dataSource = res.data.rows;
        this.$set(this.pagination, "total", +res.data.total);
      } catch (e) {
        console.error(e);
      }
    },
    //收单机构
    selectOrganization(val) {
      try {
        this.$get("/admin/merParam/UpmpOrganization/instIdOrganizationSelect2List", {
          q: encodeURIComponent(`&${this.query.instId}`)
        }).then((r) => {
          this.acqInstCodeList = r.data.results;
          console.log("this.acqInstCodeList ===", this.acqInstCodeList)
        });

      } catch (e) {
        console.error(e);
      }
    },
    setOrganizationValue(index) {
      this.query.acqInstCode = this.acqInstCodeList[index].name
      console.log("this.acqInstCodeList[index].name====", this.acqInstCodeList[index].name)
    },
    //商户名称
    selectMchntName(val) {
      try {
        this.$get("/admin/igas/historyMchntOrderReport/mchntBaseInfoListByName", {
          instId: this.query.instId
        }).then((r) => {
          this.mchntNameList = r.data.results;
          console.log("this.mchntNameList ===", this.mchntNameList)
        });

      } catch (e) {
        console.error(e);
      }
    },
    setMchntNameValue(index) {
      this.query.mchntName = this.mchntNameList[index].name
      this.syyAboutId = this.mchntNameList[index].id
      console.log("this.mchntNameList[index].name====", this.mchntNameList[index].name, this.mchntNameList[index].id)
    },

    //交易类型
    selectTxnName(val) {
      try {
        this.$get("/admin/igas/mchntOrderReport/srcTxnInfoList", {
          q: encodeURIComponent(`&${this.query.instId}`)
        }).then((r) => {
          this.txnNameList = r.data.results;
          console.log("this.txnNameList ===", this.txnNameList)
        });
      } catch (e) {
        console.error(e);
      }
    },
    setTxnNameValue(index) {
      this.query.txnName = this.txnNameList[index].name
      console.log("this.txnNameList[index].name====", this.txnNameList[index].name)
    },


    //终端
    selectTermNoList(val) {
      try {
        this.$get("/admin/csmc/tblMchntAcctDet/termNoList", {
          q: encodeURIComponent(`&${this.query.instId}`)
        }).then((r) => {
          this.termNoList = r.data.rows;
          console.log("this.termNoList ===", this.termNoList)
        });
      } catch (e) {
        console.error(e);
      }
    },
    //终端
    setTermNoListValue(index) {
      this.query.termName = this.termNoList[index].name
      console.log("this.txnNameList[index].name====", this.txnNameList[index].name)
    },


    setTxnNameValue(index) {
      this.query.txnName = this.txnNameList[index].name
      console.log("this.txnNameList[index].name====", this.txnNameList[index].name)
    },
    //重置
    async reset() {
      this.query = { instId: this.query.instId }
      this.pagination.pageNum = this.pagination.defaultCurrent;
      this.pagination.pageSize = this.pagination.defaultPageSize;
      await this.search();
    },

    setMchntNameValue(index) {
      this.query.mchntName = this.mchntNameList[index].name
      this.syyAboutId = this.mchntNameList[index].id
      console.log("this.mchntNameList[index].name====", this.mchntNameList[index].name, this.mchntNameList[index].id)
    },

    openModal(type = "add", beanInfo) {
      this.modalTitle = {
        add: "新增",
        edit: "编辑",
        view: "详情",
        delete: "注销",
      }[type];
      this.modalVisible = true;
      this.$nextTick(() => {
        this.$refs.modalForm.setOperatorType(type);
        if (type === "edit" || type === "view" || type === "delete") {
          this.$refs.modalForm.setBeanInfo(beanInfo);
        }
        this.$refs.modalForm.resetFields();
      });
    },
    async submit() {
      const res = await this.$refs.modalForm.submit();
      if (res) {
        this.modalVisible = false;
        this.pagination.defaultCurrent = 1;
        await this.search();
      }
    },
    async add(item) {
      this.openModal("add", item);
    },
    async edit(item) {
      this.openModal("edit", item);
    },
    view(item) {
      this.openModal("view", item);
    },

    async cancel(item) {
      try {
        const res = await this.$post('/admin/igas/pTxnCfg/changeStatus',
          {
            txnNum: item.txnNum,
            bizType: item.bizType,
            txnGroup: item.txnGroup,
            bizProdCode: item.bizProdCode,
            supportFlag: item.supportFlag === 'N' ? 'Y' : 'N'
          })
        if (res.status === 200) {
          this.$message.success('操作成功')
          this.pagination.defaultCurrent = 1
          await this.search()
        }
      } catch (e) {
        console.error(e)
      }
    },
    async forbid(item) {
      if (item.agentStatus === "03") {
        return this.$message.warning("已注销数据不允许重复注销");
      }
      this.openModal("delete", item);
    },
    exportExcel(item) { },
    handleClose() {
      this.open = false;
    },
  },
  mounted() {
    this.search();
  },
};
</script>
<style lang="less" scoped>
@import "../../../../../static/less/Common";

.page {
  width: 100%;
}

.section {
  background: #fff;
}

.form {
  text-align: center;
}

.select {
  width: 180px;
}

.btn-group {
  margin-bottom: 20px;
}

.subtitle {
  width: 100%;
  font-size: 16px;
  margin-bottom: 10px;
  padding: 0 10px;
}

a-form-model-item {
  width: 50%;
  padding-left: 10px;
  padding-right: 10px;
}

/deep/.ant-select-selection--single {
  min-width: 200px;
}

/deep/.search {
  flex: content;
  width: 100%;
}

/deep/.ant-form-item>.ant-form-item-label {
  display: inline-block;
  vertical-align: top;
  min-width: 120px;
}

/deep/ .ant-form-item-control {
  position: relative;
  line-height: 40px;
  zoom: 1;
  min-width: 200px;
}
</style>
